<template>
  <div class="content">
    <div class="content">
      <div class="header_box">
        <div class="header_left">IP池信息</div>
        <div class="header_right">
          <el-form :inline="true" :model="searFrom" class="form_box">
            <el-form-item>
              <el-input
                v-model="searFrom.name"
                placeholder="国家"
                style="width: 200px"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="searFrom.apikey"
                placeholder="api别名"
                style="width: 200px"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="searFrom.code"
                placeholder="cidr"
                style="width: 200px"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="init">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="syncData">同步</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="reportVis = true"
                >问题IP报告</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="repairVis = true"
                >维修站</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#fafbfc', color: '#bbbcc3' }"
        max-height="500"
        :scroll-x="true"
      >
        <el-table-column type="index" :index="indexMethod" />
        <el-table-column prop="country" label="国家(机房所在地)" />
        <el-table-column prop="region" label="地区(机房所在地)" />
        <el-table-column prop="cidr" label="cidr" />
        <el-table-column prop="expiryDate" label="到期时间" width="150" />

        <el-table-column prop="level" label="级别" width="120">
          <template #default="{ row }">
            <el-select
              v-model="row.level"
              placeholder="请选择级别"
              @change="change(row)"
            >
              <el-option label="高级" value="高级"></el-option>
              <el-option label="中级" value="中级"></el-option>
              <el-option label="初级" value="初级"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="产品导入" width="220">
          <template #default="{ row }">
            <el-select
              v-model="row.productName"
              multiple
              placeholder="请选择产品名称"
              @change="change(row)"
            >
              <el-option label="产品A" value="产品A"></el-option>
              <el-option label="产品B" value="产品B"></el-option>
              <el-option label="产品C" value="产品C"></el-option>
              <!-- 可以根据需要添加更多选项 -->
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="apikey" label="api别名" />
        <el-table-column prop="city" label="city" />
        <el-table-column prop="region" label="region" />
        <el-table-column prop="country" label="country" />
        <el-table-column prop="postal" label="postal" />
        <el-table-column prop="timezone" label="timezone" />
        <el-table-column label="测试">
          <template #default="{ row }">
            <el-button @click="showTestDialog(row)">测试</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="isActive" label="监控">
          <template #default="{ row }">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="row.isActive"
              @change="change(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="{ row }">
            <div class="icon_content">
              <el-tooltip
                class="box-item"
                effect="dark"
                content="编辑"
                placement="top-start"
              >
                <div class="icon_box">
                  <el-icon @click="edit(row)" size="20" color="#71778d"
                    ><EditPen
                  /></el-icon>
                </div>
              </el-tooltip>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="删除"
                placement="top-start"
              >
                <div class="icon_box_d">
                  <el-icon @click="remove(row)" size="20" color="#71778d"
                    ><Remove
                  /></el-icon>
                </div>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page_box">
        <el-pagination
          v-model:current-page="searFrom.pageNo"
          v-model:page-size="searFrom.pageSize"
          :page-sizes="[10, 50, 100, 150]"
          :small="small"
          :disabled="false"
          :background="true"
          layout="sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 新增对话框 -->
    <el-dialog v-model="addVis" title="IP池信息" width="500">
      <el-form
        label-position="right"
        label-width="auto"
        :model="objectForm"
        style="max-width: 600px"
      >
        <el-form-item label="国家">
          <el-input v-model="objectForm.name" />
        </el-form-item>
        <el-form-item label="地区">
          <el-input v-model="objectForm.description" />
        </el-form-item>
        <el-form-item label="cidr">
          <el-input v-model="objectForm.cidr" />
        </el-form-item>
        <el-form-item label="到期时间">
          <el-input v-model="objectForm.expiryDate" />
        </el-form-item>
        <el-form-item label="路由策略">
          <el-select
            v-model="objectForm.routingPolicy"
            placeholder="请选择路由策略"
          >
            <el-option label="直连" value="直连"></el-option>
            <el-option label="跳转" value="跳转"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-select
            v-model="objectForm.productName"
            multiple
            placeholder="请选择产品名称"
          >
            <el-option label="产品A" value="产品A"></el-option>
            <el-option label="产品B" value="产品B"></el-option>
            <el-option label="产品C" value="产品C"></el-option>
            <!-- 可以根据需要添加更多选项 -->
          </el-select>
        </el-form-item>
        <el-form-item label="city">
          <el-input v-model="objectForm.description" />
        </el-form-item>
        <el-form-item label="region">
          <el-input v-model="objectForm.description" />
        </el-form-item>
        <el-form-item label="country">
          <el-input v-model="objectForm.description" />
        </el-form-item>
        <el-form-item label="postal">
          <el-input v-model="objectForm.description" />
        </el-form-item>
        <el-form-item label="timezone">
          <el-select v-model="objectForm.timezone" placeholder="请选择时区">
            <el-option label="UTC+8" value="UTC+8"></el-option>
            <el-option label="UTC-5" value="UTC-5"></el-option>
            <el-option label="UTC+0" value="UTC+0"></el-option>
            <!-- 可以根据需要添加更多选项 -->
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addVis = false">取消</el-button>
          <el-button type="primary" @click="confirmAdd"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 报告对话框 -->
    <el-dialog v-model="reportVis" title="问题报告" width="70%">
      <el-form label-position="left" label-width="200px" :model="objectForm">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="涉及IP">
              <el-input v-model="objectForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="涉及产品名称">
              <el-input v-model="objectForm.description" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报告账户">
              <el-input v-model="objectForm.description" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="报告原因">
              <el-input v-model="objectForm.description" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="此账户持有设备数量情况">
              <el-input v-model="objectForm.description" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否移除单个IP">
              <el-input v-model="objectForm.description" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="是否移除单个IP">
              <el-input v-model="objectForm.description" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否移除相应的整段IP">
              <el-input v-model="objectForm.description" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="解决方式">
              <el-input v-model="objectForm.description" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addVis = false">取消</el-button>
          <el-button type="primary" @click="confirmAdd"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 维修站 -->
    <el-dialog v-model="repairVis" title="维修站" width="20%">
      <el-form label-position="right" :model="objectForm">
        <el-form-item label="问题IP或IP段">
          <el-input v-model="objectForm.name" />
        </el-form-item>
        <el-form-item label="涉及产品名称">
          <el-input v-model="objectForm.description" />
        </el-form-item>
        <el-form-item label="是否恢复">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="objectForm.isActive"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="objectForm.description" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addVis = false">取消</el-button>
          <el-button type="primary" @click="confirmAdd"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 新增测试对话框 -->
    <el-dialog v-model="testDialogVisible" title="测试结果" width="50%">
      <el-table :data="testTableData" style="width: 100%">
        <el-table-column prop="ip" label="IP" />
        <el-table-column prop="proxyAttribute" label="代理属性" />
        <el-table-column prop="proxyDetails" label="代理详情" />
        <el-table-column label="操作">
          <template #default="{ row, $index }">
            <el-button @click="showEditDialog($index)">编辑</el-button>
            <el-button @click="deleteTestRow($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showAddDialog">新增</el-button>
          <el-button @click="testDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 新增数据对话框 -->
    <el-dialog v-model="addDialogVisible" title="新增数据" width="30%">
      <el-form :model="newEntry" label-width="80px">
        <el-form-item label="IP">
          <el-input v-model="newEntry.ip" />
        </el-form-item>
        <el-form-item label="代理属性">
          <el-input v-model="newEntry.proxyAttribute" />
        </el-form-item>
        <el-form-item label="代理详情">
          <el-input v-model="newEntry.proxyDetails" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmAddEntry">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑数据对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑数据" width="30%">
      <el-form :model="editEntry" label-width="80px">
        <el-form-item label="IP">
          <el-input v-model="editEntry.ip" />
        </el-form-item>
        <el-form-item label="代理属性">
          <el-input v-model="editEntry.proxyAttribute" />
        </el-form-item>
        <el-form-item label="代理详情">
          <el-input v-model="editEntry.proxyDetails" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmEditEntry">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineOptions, ref, onBeforeMount } from "vue";
import * as tenantApi from "../../../api/project3/ip/ip.js";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import confirm from "../../../utils/ElMessageUtils.js";

defineOptions({ name: "ip" });

const tableData = ref([
  {
    name: "中国",
    code: "CN",
    cidr: "192.168.0.0/24",
    expiryDate: "2023-12-31",
    routingPolicy: "直连",
    level: "高级",
    productName: ["产品A", "产品B"],
    city: "北京",
    region: "华北",
    country: "中国",
    postal: "100000",
    timezone: "UTC+8",
    apikey: "apikey-中国",
  },
  {
    name: "美国",
    code: "US",
    cidr: "10.0.0.0/8",
    expiryDate: "2024-06-30",
    routingPolicy: "跳转",
    level: "中级",
    productName: ["产品C"],
    city: "纽约",
    region: "东北",
    country: "美国",
    postal: "10001",
    timezone: "UTC-5",
    apikey: "apikey-美国",
  },
  // 可以根据需要添加更多初始化数据
]);

const objectForm = ref({
  name: "",
  description: "",
  cidr: "",
  expiryDate: "",
  routingPolicy: "",
  productName: [],
  isActive: 0,
  timezone: "UTC+8",
});

const router = new useRouter();

let searFrom = ref({
  pageNo: 1,
  pageSize: 10,
  excludeCode: "admin",
});

let total = ref(0);

let addVis = ref(false);
let reportVis = ref(false);
let repairVis = ref(false);

const testDialogVisible = ref(false);
const testTableData = ref([]);

const addDialogVisible = ref(false);
const newEntry = ref({
  ip: "",
  proxyAttribute: "",
  proxyDetails: "",
});

const editDialogVisible = ref(false);
const editEntry = ref({
  ip: "",
  proxyAttribute: "",
  proxyDetails: "",
});

const init = async () => {
  const res = await tenantApi.page(searFrom.value);
  const { records } = res;
  tableData.value = records;
  total.value = res.total;
};

const syncData = () => {
  // 在这里实现同步逻辑
  console.log("同步数据");
};

const confirmAdd = async () => {
  const res = await tenantApi.saveOrUpdate(objectForm.value);
  const { code, msg } = res;
  if (code == "200") {
    ElMessage.success("操作成功");
    addVis.value = false;
    init();
    return;
  }
  ElMessage.success(msg);
};

const change = async (row) => {
  const res = await tenantApi.saveOrUpdate(row);
  const { code, msg } = res;
  if (code == "200") {
    ElMessage.success("操作成功");
    addVis.value = false;
    init();
    return;
  }
  ElMessage.success(msg);
};
const remove = async (row) => {
  const b = await confirm("您确定要删除吗？");
  if (!b) {
    return;
  }
  const res = await tenantApi.remove({ id: row.id });
  const { code, msg } = res;
  if (code == "200") {
    ElMessage.success("操作成功");
    addVis.value = false;
    init();
    return;
  }
  ElMessage.success(msg);
};

const edit = (row) => {
  // 在这里实现编辑逻辑
  console.log("编辑行数据:", row);
  // 例如，打开一个编辑对话框并填充数据
  objectForm.value = { ...row };
  addVis.value = true;
};

const showTestDialog = (row) => {
  // 在这里设置测试数据
  testTableData.value = [
    { ip: "127.0.0.1", proxyAttribute: "属性1", proxyDetails: "详情1" },
    { ip: "127.0.0.2", proxyAttribute: "属性2", proxyDetails: "详情2" },
    // 可以根据需要添加更多数据
  ];
  testDialogVisible.value = true;
};

const showEditDialog = (index) => {
  editEntry.value = { ...testTableData.value[index] };
  editDialogVisible.value = true;
};

const confirmEditEntry = () => {
  const index = testTableData.value.findIndex(
    (item) => item.ip === editEntry.value.ip
  );
  if (index !== -1) {
    testTableData.value[index] = { ...editEntry.value };
  }
  editDialogVisible.value = false;
  console.log("编辑数据:", editEntry.value);
};

const deleteTestRow = (index) => {
  // 删除行数据
  testTableData.value.splice(index, 1);
  console.log("删除行索引:", index);
};

const showAddDialog = () => {
  newEntry.value = { ip: "", proxyAttribute: "", proxyDetails: "" };
  addDialogVisible.value = true;
};

const confirmAddEntry = () => {
  testTableData.value.push({ ...newEntry.value });
  addDialogVisible.value = false;
  console.log("新增数据:", newEntry.value);
};

onBeforeMount(() => {
  // init();
});
</script>

<style lang="less" scoped>
.header_right {
  background-color: #ffffff;
  justify-content: flex-end;
  border-radius: 0px 15px 0px 0px;
}
:deep(.form_box) {
  width: 80%;
  height: 40%;
  margin: 0px;
  display: flex;
  justify-content: flex-end;
}
.header_left {
  border-radius: 15px 0px 0px 0px;
  font-weight: 700;
}
:deep(.el-table) {
  user-select: text;
}
</style>